<template>
  <div class="app-container">
    <uc-table url="admin/maintenanceRecord/getInMaintenanceRecordPage" ref="recordTable" :name="title" table-border pageable :search-form="searchForm">
      <template slot="searchForm">
        <el-form size="mini" :inline="true" :model="searchForm" class="demo-form-inline filter-container">
          <!--搜索输入框-->
          <el-form-item>
            <el-input type="text" v-model="searchForm.title" placeholder="名称" clearable @clear="clearInput()"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" class="filter-item" @click="handleSearch()">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="columns">
          <el-table-column prop="name" label="名称" align="left" :show-overflow-tooltip="true" ></el-table-column>
          <el-table-column prop="enterpriseName" label="所属主体" align="left" :show-overflow-tooltip="true" ></el-table-column>
          <el-table-column prop="manitenanceEnterpriseName" label="维保企业" align="left" :show-overflow-tooltip="true" v-if="this.$route.params.faultWorkOrder!=2" ></el-table-column>
          <el-table-column prop="imgUrl" label="隐患照片" align="left" :show-overflow-tooltip="true" v-if="this.$route.params.faultWorkOrder==2">
              <template slot-scope="scope">
                  <el-image
                          :src="scope.row.imgUrl+'?imageView2/1/w/40/h/40'" class="user-avatar"
                          :preview-src-list="[scope.row.imgUrl]">
                  </el-image>
              </template>
          </el-table-column>
          <el-table-column prop="designeeName" label="上报人" align="left" :show-overflow-tooltip="true" v-if="this.$route.params.faultWorkOrder==2"></el-table-column>
          <el-table-column prop="addTime" label="上报时间" align="left" :show-overflow-tooltip="true" v-if="this.$route.params.faultWorkOrder==2">
              <template slot-scope="scope">
                  {{scope.row.addTime|dateFormat}}
              </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="270" align="left" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                  <!--编辑按钮-->
                  <el-button  size="mini" icon="el-icon-edit" type="primary" @click="handleEdit(scope.row)" >编辑</el-button>
                  <el-button size="mini" icon="el-icon-info" type="success" @click="handleInfo(scope.row)">详情</el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete" :loading="deleteLoading" @click="handleDelete(scope.row)">删除</el-button>
              </template>
          </el-table-column>
      </template>
    </uc-table>
  </div>
</template>

<script>
import UcTable
  from "../../components/UcTable/index.vue";
import {getInMaintenanceRecordVo, getMaintenanceRecordList, removeMaintenanceRecord,getInMaintenanceRecordPage} from "../../api/maintenanceRecord";

export default {
  name: "list",
  components: {UcTable},
  data() {
      return {
          searchForm: {
              faultWorkOrder: this.$route.params.faultWorkOrder
          },
          deleteLoading: false,
      }
  },
  computed:{
      title(){
          let text = "消防隐患";
          switch (this.$route.params.faultWorkOrder){
              case 0:
                 text = "维保工单";
                 break;
              case 1:
                  text = "故障工单";
                  break;
              case 2:
                  text = "消防隐患";
                  break;
              default:
                  break;
          }
          return text;
      }
  },
    created() {
      console.log(this.$route.params)
    },
    methods: {
    clearInput() {
      //清除输入框
      this.searchForm.title = null
      this.handleSearch(this.tabValue)
    },

    handleSearch(val) {
      console.log(val)
      this.$refs[val].getTableData(1)
    },


    handleAdd(val) {
      this.$router.push("/maintenance/maintenanceEdit/" +val.faultWorkOrder+ "/"+val.ucId)
    },
    handleEdit(val) {
      this.$router.push("/workOrder/edit/" +val.faultWorkOrder+"/"+ val.ucId)
    },
    handleInfo(val) {
        this.$router.push("/workOrder/info/" +val.faultWorkOrder+"/"+ val.ucId)
    },
    handleDelete(val) {
      this.$confirm('您确定要执行删除' + val.name + '这条信息吗？', '提醒信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteLoading = true
        removeMaintenanceRecord(val).then(res => {
          this.deleteLoading = false
          this.$notify.success({
            title: '成功',
            message: "删除工单信息成功"
          })
          this.handleSearch(this.tabValue)
        }).catch(res => {
          this.deleteLoading = false
          this.$notify.error({
            title: '失败',
            message: res.msg
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    getInMaintenanceRecordVo() {
      getInMaintenanceRecordVo({}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "查询工单信息成功"
        })
        this.handleSearch()
      })
    },

  }
}
</script>

<style scoped lang="scss">
.user-avatar {
    cursor: pointer;
    width: 20px;
    height: 20px;
}
</style>